<template>
	<div class="login">
		<div class="login__title">有买有卖商城系统</div>
		<div class="login__container">
			<div class="login__logo hidden xl:block"></div>
			<div class="login__form">
				<div class="login__form__title">登录</div>
				<div class="login__form__header">
					<el-form ref="form" :model="form" :rules="formRules" class="login__form__header__form">
						<el-form-item prop="username">
							<el-input v-model="form.username" placeholder="请输入您的账号" @keyup.enter.native="handleLogin">
								<img slot="prefix" class="img" src="@/assets/images/login/user.png" />
							</el-input>
						</el-form-item>
						<el-form-item>
							<el-input v-model="form.password" auto-complete="off" placeholder="请输入您的密码" type="password" @keyup.enter.native="handleLogin">
								<img slot="prefix" class="img" src="@/assets/images/login/password.png" />
							</el-input>
						</el-form-item>
						<el-form-item prop="code">
							<el-input v-model="form.code" auto-complete="off" placeholder="请输入验证码" @keyup.enter.native="handleLogin">
								<img slot="prefix" class="img" src="@/assets/images/login/code.png" />
								<img slot="suffix" :src="codeData" class="w-[112px] h-[40px] cursor-pointer" @click="getCode" />
							</el-input>
						</el-form-item>
						<el-form-item>
							<div class="flex items-center justify-between">
								<el-checkbox v-model="form.rememberMe">记住密码</el-checkbox>
								<div class="login__form__forgot">忘记密码？</div>
							</div>
						</el-form-item>
					</el-form>
				</div>
				<div class="login__form__submit">
					<el-button :loading="loading" @click.native.prevent="handleLogin">
						{{ loading ? '登录中' : '登录' }}
					</el-button>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
import { getCodeImg } from '@/api/login';
import { decrypt, encrypt } from '@/utils';
import Cookies from 'js-cookie';

export default {
	data: () => ({
		form: {
			username: null,
			password: null,
			code: null,
			uuid: null,
			rememberMe: false,
		},
		formRules: {
			username: [{ required: true, trigger: 'blur', message: '用户名不能为空' }],
			password: [{ required: true, trigger: 'blur', message: '密码不能为空' }],
			code: [{ required: true, trigger: 'change', message: '验证码不能为空' }],
		},
		loading: false,
		redirect: null,
		codeData: null,
	}),
	watch: {
		$route: {
			handler: function (route) {
				this.redirect = route.query && route.query.redirect;
			},
			immediate: true,
		},
	},

	created() {
		this.getCode();
		this.getCookie();
	},
	methods: {
		//验证码
		getCode() {
			getCodeImg().then((res) => {
				this.codeData = 'data:image/gif;base64,' + res.img;
				this.form.uuid = res.uuid;
			});
		},
		getCookie() {
			const username = Cookies.get('username');
			const password = Cookies.get('password');
			const rememberMe = Cookies.get('rememberMe');

			this.form = {
				...this.form,
				username: username === undefined ? this.form.username : username,
				password: password === undefined ? this.form.password : decrypt(password),
				rememberMe: rememberMe === undefined ? false : Boolean(rememberMe),
			};
		},

		//登录
		handleLogin() {
			this.$refs.form.validate((valid) => {
				if (valid) {
					this.loading = true;
					if (this.form.rememberMe) {
						Cookies.set('username', this.form.username, { expires: 30 });
						Cookies.set('password', encrypt(this.form.password), {
							expires: 30,
						});
						Cookies.set('rememberMe', this.form.rememberMe, {
							expires: 30,
						});
					} else {
						Cookies.remove('username');
						Cookies.remove('password');
						Cookies.remove('rememberMe');
					}
					this.$store
						.dispatch('Login', this.form)
						.then(() => {
							this.$router.push({ path: '/' }).catch(() => {});
						})
						.catch(() => {
							this.loading = false;
							this.getCode();
						});
				}
			});
		},
	},
};
</script>

<style lang="scss" scoped>
.login {
	background: url(~@/assets/images/login/bg.png) no-repeat;
	background-size: 100% 100%;
	@apply w-full pl-0 lg:pl-[100px] pt-[80px] min-h-[100vh];
	&__title {
		font-family: Login;
		@apply mb-[16px] h-[50px] text-center xl:text-left text-[32px] md:text-[48px] text-white;
	}

	&__container {
		@apply flex justify-center 2xl:justify-start;
	}

	&__logo {
		background: url(~@/assets/images/login/logo.png) no-repeat;
		background-size: 100% 100%;
		@apply h-[695px] w-[879px] mt-[100px] 2xl:mr-[130px];
	}

	&__form {
		background: url(~@/assets/images/login/form.png) no-repeat;
		background-size: 100% 100%;
		@apply w-full md:w-[718px] md:px-[60px] py-[100px] flex flex-col;
		&__title {
			@apply text-white text-[28px] text-center pt-[20px];
		}

		&__header {
			background: url(~@/assets/images/login/header.png) no-repeat;
			background-size: 100% 100%;
			@apply w-[90%] md:w-full m-auto relative flex-1;
			&__form {
				padding: 100px 50px;
				@apply md:pt-[100px] md:px-[80px];
				.img {
					width: 22px;
					height: 22px;
				}

				::v-deep {
					.el-form-item:last-child {
						margin-bottom: 0;
					}

					.el-input__suffix {
						top: -10px;
					}

					.el-checkbox {
						display: flex;
						align-items: center;
						position: relative;
					}

					.el-checkbox__inner {
						background-color: transparent;
						border: 1px solid #f3f3f3;
						border-radius: 6px;
						width: 21px;
						height: 21px;
					}

					.el-checkbox__inner::after {
						top: 4px;
						left: 8px;
						height: 8px;
						width: 4px;
					}

					.el-checkbox__label {
						color: rgba(255, 255, 255, 0.5);
						font-size: 18px;
						padding-left: 19px;
						height: 21px;
					}

					.el-form-item {
						margin-bottom: 32px;
					}

					.el-input__prefix {
						top: -7px !important;
						height: 22px;
						left: 0;
						color: #fff;
						font-size: 22px;
					}

					.el-input__inner {
						background: transparent;
						border: none;
						border-bottom: 1px solid #ffffff;
						font-size: 20px;
						padding-bottom: 25px;
						height: 51px;
						color: #ffffff;
						border-radius: 0;
						padding-left: 50px;

						&::placeholder {
							color: rgba(255, 255, 255, 0.5) !important;
						}
					}
				}
			}
		}

		&__forgot {
			color: rgba(255, 255, 255, 0.5);
			font-size: 18px;
		}

		&__submit {
			@apply text-center;
			.el-button {
				background-color: #348cff;
				border: 1px solid #348cff;
				color: #fff;
				width: 364px;
				height: 66px;
				border-radius: 8px;
				font-size: 28px;
			}
		}
	}
}
</style>
